<template>
  <div class="loginclearfix">
    <el-header>
      <div class="header">
        <img src="../assets/三湘银行.png" alt="" />
        <ul>
          <li><a href="https://www.csxbank.com/szyh.html">手机银行</a></li>
          <li><a href="http://campus.51job.com/csxbank2022/">校园招聘</a></li>
          <li>
            <a
              href="https://cms-cloud.csxbank.com/icc/Eclient/pch5/index.html?mgw=1&bizType=%E5%AE%98%E7%BD%91&robotId=a229a99f2e7c4d6dbca00f17989fec11"
              >在线客服</a
            >
          </li>
        </ul>
      </div>
    </el-header>
    <div class="login-wrap">
      <el-row type="flex" justify="center">
        <el-form ref="loginForm" :model="user" status-icon label-width="80px">
          <h3>注册</h3>
          <h3 class="fanhui" @click="back">返回</h3>
          <hr />
          <el-form-item prop="username" label="用户名" class="input25">
            <el-input
              v-model="user.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" class="input25">
            <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="code" label="验证码">
            <el-input
              v-model="user.code"
              placeholder="请输入验证码"
              class="yanzhengma"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="button1" @click="Send"
              >点击发送验证码</el-button
            >
          </el-form-item>

          <el-form-item prop="password" label="设置密码" class="input5">
            <el-input
              v-model="user.password"
              show-password
              placeholder="请输入密码"
              class="input25"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon @click="doRegister" class="button2"
              >注册账号</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      user: {
        username: "",
        email: "",
        password: "",
        code: "",
      },
    };
  },
  created() {},
  methods: {
    back() {
      this.$router.push({ path: "/login" });
    },
    Send() {
      this.$http
        .post("http://127.0.0.1:8001/register/getcode", {
          params: { email: this.user.email },
        })
        .then((res) => {
          if (res.data.code == 1000) {
            this.$message({
              message: res.data.message,
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        });
    },
    doRegister() {
      if (!this.user.username) {
        this.$message.error("请输入用户名！");
        return;
      } else if (!this.user.email) {
        this.$message.error("请输入邮箱！");
        return;
      } else if (this.user.email != null) {
        var reg =
          /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!reg.test(this.user.email)) {
          this.$message.error("请输入有效的邮箱！");
        } else if (!this.user.password) {
          this.$message.error("请输入密码！");
          return;
        } else {
          // this.$router.push({ path: "/" }); //无需向后台提交数据，方便前台调试

          this.$http
            .post("http://127.0.0.1:8001/register/doregister", {
              params: {
                username: this.user.username,
                email: this.user.email,
                password: this.user.password,
                code: this.user.code,
              },
            })
            .then((res) => {
              if (res.data.code == 1000) {
                this.$router.push({ path: "/login" });
                setTimeout(() => {
                  this.$message({
                    message: "注册成功",
                    type: "success",
                  });
                }, 300);
              } else {
                alert("您输入的用户名已存在！");
              }
            });
        }
      }
    },
  },
};
</script>
 

<style scoped>
.loginclearfix {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;

  /* z-index: -10; */

  /* background-image:url(../assets/2222.jpg); */

  background-repeat: no-repeat;
  background-position: center;

  background-attachment: fixed;
  background-size: 100%;
}

.fanhui {
  position: absolute;
  left: 75%;
  top: 0px;
}
.button2 {
  width: 100%;
  margin-left: -26px;
  margin-bottom: 10px;
}
.button1 {
  z-index: 10;
  position: absolute;

  left: 70%;
  bottom: 23px;
  width: 150px;
}
.yanzhengma {
  width: 50%;
}
.el-form {
  border-radius: 10px;
  box-shadow: gray 0px 0px 10px;
  height: 75%;
  width: 70%;
}
.login {
  width: 100%;
  height: 100%;

  /* background-size: cover; */
  overflow: hidden;
}
.login-wrap {
  /* margin-left: 4px; */
  position: relative;
  top: 20%;
  left: 25%;
  background-size: cover;
  width: 50%;
  height: 50%;
  margin-top: -5px;
  /* margin: 215p auto; */
  /* overflow: hidden; */
  /* padding-top: 10px; */
  /* line-height: 20px; */
}

h3 {
  color: #0babeab8;
  font-size: 24px;
}

.input5 {
  margin-top: -24px;
  width: 100%;
}
.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;

  background-color: #333333;
}
.header img {
  margin-top: 17px;
  margin-left: 15px;
}
.header ul {
  position: relative;
  bottom: 25px;
}
.header li {
  margin-right: 7px;
  color: #f4f4f4;
  float: right;
}
.button {
  display: flex;
  flex-wrap: nowrap;
}

.box-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  float: left;
  height: 330px;
  border: none;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.login-form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0px 20px;
  border: none;
  box-sizing: border-box;
}

.header-card {
  display: flex;
  justify-content: center;
  height: 20px;
  font-size: 18px;
}

a {
  color: #ffffff;
  text-decoration: none;
}
* {
  list-style: none;
}
.input25 {
  width: 95%;
}
</style>